﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>vuex之将购物车底部生成新组件用于统计总价</title>
    <link href="../css/bootstrap.css"/>
    <link href="../css/bootstrap-theme.css"/>
</head>
<body>
<h1>vuex之将购物车底部生成新组件用于统计总价</h1><br/>

<div id="app">
    <p>
        因为是组件化了，数据在store里，所以可以多次复用，且组件与组件之间数据共享
    </p>
    <prices></prices>
    <prices></prices>

    <lists></lists>

    <prices></prices>
</div>
<script src="../js/jquery-2.2.0.min.js"></script>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script src="../node_modules/vuex/dist/vuex.js"></script>

<script type="text/x-template" id="lists">
    <div>
        <h1>购物车</h1>
        <table border="1" width="100%">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr v-for="v in goods">
                <td>{{v.id}}</td>
                <td>{{v.title}}</td>
                <td>{{v.price}}</td>
                <!--<td>{{v.num}}</td>-->
                <td><input v-model="v.num"/></td>
                <td>{{v.prices}}</td>
            </tr>
        </table>

    </div>
</script>

<script type="text/x-template" id="prices">
    <div>
        总价:{{totalPrice}}
    </div>
</script>

<script>

    let lists = {
        template:'#lists',
        computed:{
            goods(){
                return this.$store.getters.getGoods;
            }
        }
    };
    let prices = {
        template:'#prices',
        computed:{
            totalPrice(){
                return this.$store.getters.totalPrice;
            }
        }
    };

    let store = new Vuex.Store({
        state:{
            goods:[
                {id:1,title:'标题1',price:10,num:3},
                {id:4,title:'标题4',price:40,num:4},
                {id:2,title:'标题2',price:20,num:6},
                {id:5,title:'标题5',price:70,num:2}
            ]
        },

        //可以把getters理解成computed，计算属性。只不过使用vuex来统一管理状态而已
        getters:{
            totalPrice(state){
                let totalPrice = 0;
                for(let i=0,len=state.goods.length;i<len;i++){
                    var obj = state.goods[i];
                    totalPrice += obj.price*obj.num;
                }
                return totalPrice;
            },
            getGoods(state){
                let goods = state.goods;
                goods.forEach(v => {
                    v.prices = v.price*v.num;
                });
                return goods;
            }
        }
    });

    var app = new Vue({
        el: '#app',
        store,
        components:{lists,prices},
        data: {}
    });
</script>

</body>
</html>